<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>

        <el-row :gutter="30">

         <el-col :span="4">
        <el-label>标题</el-label>
        </el-col>
  
            <el-col :span="4">
          <el-input
            placeholder="单行输入"
            v-model="title"
            clearable
            @clear=""
          >

          </el-input>
        </el-col>
      </el-row>

      <el-row :gutter="30">

         <el-col :span="4">
        <el-label>推送内容</el-label>
        </el-col>
  
            <el-col :span="10">
          <el-input
            placeholder="输入"
            v-model="content"
            clearable
            @clear=""
          >

          </el-input>
        </el-col>
      </el-row>

      <el-row :gutter="30">

        <el-col :span="4">
        <el-label>通知指定用户(否为全部用户)</el-label>
        </el-col>
  
            <el-col :span="4">
              <el-radio-group v-model="all" @change="userChange">
                <el-radio  label="0">是</el-radio>
                <el-radio  label="1">否</el-radio>
              </el-radio-group>
        </el-col>
      </el-row>
      <el-row :gutter="30">

        <el-col :span="4">
        <el-label>选择用户</el-label>
        </el-col>
  
            <el-col :span="4">
          <el-input
            placeholder="输入用户呢称或手机号"
            v-model="user"
            clearable
            @clear=""
            :disabled.sync="showall"
          >

          </el-input>
        </el-col>

        <el-col :span="4">
         <el-button type="primary" 
         @click="selectuser()" icon="el-icon-search"
            >添加</el-button
          >

        </el-col>
      </el-row>

            <el-row :gutter="30" :visible.sync="showall">

         <el-col :span="4">
        <el-label>选择用户</el-label>
        </el-col>
            <el-col :span="4">
                <el-label>共计{{total}}人</el-label>
            </el-col>
      </el-row>

 <el-table :data="userlist" border stripe :visible.sync="showall">


        <el-table-column label="昵称" prop="nick_name"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteuser(scope.row.phone)"
            ></el-button>
            
          </template>
        </el-table-column>
        


        
      </el-table>

    </el-card>
    <el-row>
      <el-col :span="4">
         <el-button type="primary" 
         @click="push()" icon="el-icon-search"
            >推送</el-button
          >

        </el-col>
    </el-row>
    
  </div>
</template>

<script>
export default {
  data () {
    let self = this;
    return {
      // 查询条件
      queryInfo: {
        id: '',
        currentPage: 1,
        
        starttime: null,
        endtime: null,
        
      },

      templist:[],
      total: 0,
      title:"",
      content:"",
      title: "",
      user:"",
      acceptuser:"",
      all:"0",
      showall:false,
      userlist:[],
      phonelist:[],

      showDialogVisible: false,

    }
  },
  created () {
    // 加载页面时 加载一次数据

  },
  methods: {
    async selectuser () {
      
      const { data: res } = await this.$http.get('users/query/user/phonenickname/' + this.user)
      if (res.code !== 200) return this.$message.error('Error:该用户不存在')
      //this.templist = res.data
      res.data.forEach(element => {
        this.userlist.push(element)
      });
      
      this.total = this.userlist.length
      this.cleartitle()
      

    },

    deleteuser (phone) {
      var index=this.userlist.findIndex(function(item){
    	      			return item.phone==phone;
    	      		})
    	this.userlist.splice(index,1); 
      this.total = this.userlist.length
    },

    // 表格 分页页数切换
    handleCurrentChange (newPage) {
      this.queryInfo.currentPage = newPage
      this.getMessageList(newPage)
    },
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getissueList(1)
    },

    userChange:function(val){
          let that = this 
          that.showall=(val==='1')?true:false;
        },


    cleartitle(){
      this.title=""
    },

    async push(){

      let acceptuser = ""
      this.userlist.forEach(element => {
        acceptuser = acceptuser+element.registrationid+","
      });
      const { data: res } = await this.$http.post(
        'push/pushmessage',
        { 'title': this.title,
          'content': this.content,
          'all': this.all,
          'acceptuser':acceptuser}, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )


    }


  },

  
  filters: {

  }
}
</script>

<style lang="less" scope>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

.el-col {
    border-radius: 4px;
  }


  
.yes{
    float:left
		width:4.2rem 
		height:2rem 
		line-height:2rem 
		text-align:center
		border-radius:1rem 
		&:nth-child(1){
			margin-right:0.8rem 
    }
    
    color:blue
    }
.no{
    float:left
		width:4.2rem 
		height:2rem 
		line-height:2rem 
		text-align:center
		border-radius:1rem 
		&:nth-child(1){
			margin-right:0.8rem 
    }
    color:black

}

</style>
